import React, { useState } from 'react';
import { useLocation } from 'react-router-dom';
import './index.scss';

import { getSongUrl } from '../../utils/http';

import SongWords from './songWords';

export default function Details() {
    const [songUrl, setSongUrl] = useState('');
    const [isPlay, setIsPlay] = useState(false);
    const location = useLocation();
    let songInfo = location.state.song;
    let songId = songInfo.id;
    let songName = songInfo.name;
    let songImgUrl = songInfo.album.artist.img1v1Url;
    let songArtists = songInfo.artists;
    let songAlbum = songInfo.album.name;
    let audio = React.createRef();
    let speedBar = React.createRef();
    let innerSpeedBar = React.createRef();
    let innerSpeedBarTop = React.createRef();
    getSongUrl(songId).then(res => {
        if (res.data.code === 200) {
            setSongUrl(res.data.data[0].url);
        }
    })
    // 播放
    function play() {
        audio.current.play();
    }
    // 暂停
    function pause() {
        audio.current.pause();
    }
    // 播放/暂停
    function playOrPause() {
        if (isPlay) {
            play();
            setIsPlay(false);
        } else {
            pause();
            setIsPlay(true);
        }
    }

    return (
        <div id='songDetails'>
            <audio ref={audio} src={songUrl}>
                您的浏览器不支持 audio 标签。
            </audio>
            {/* 播放控件 */}
            <div className='playControl'>
                <div id='speedBar' ref={speedBar}><div id='innerSpeedBar' ref={innerSpeedBar}></div><div id='innerSpeedBarTop' ref={innerSpeedBarTop}></div></div>
                <span onClick={() => playOrPause()} className={isPlay ? 'iconfont icon-play' : 'iconfont icon-suspended'}></span>
            </div>

            <div className='topContent'>
                <div className='left'>
                    <img src={songImgUrl} alt="图片" />
                </div>
                <div className='right'>
                    <h3 className='songName'>{songName}</h3>
                    <p className='songArtists'>
                        歌手：
                        {
                            songArtists.map((artItem, index) => {
                                return (
                                    <span key={artItem.id}>{artItem.name}{index === songArtists.length - 1 ? '' : '、'}</span>
                                )
                            })
                        }
                    </p>
                    <p>专辑：{songAlbum}</p>
                    <SongWords
                        setIsPlay={setIsPlay}
                        playOrPause={playOrPause}
                        songInfo={songInfo}
                        audio={audio}
                        speedBar={speedBar}
                        innerSpeedBar={innerSpeedBar}
                        innerSpeedBarTop={innerSpeedBarTop}
                    ></SongWords>
                </div>
            </div>

            {/* <button onClick={()=>play()}>播放</button>
            <button onClick={()=>pause()}>暂停</button> */}
        </div>
    )
}